<template>
  <div>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">事项编号：{{ postmessage.number }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">上报人：{{ postmessage.reportPerson }}</el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">上报时间：{{ postmessage.createTime }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8" style="cursor: pointer" @click.native="openClik"
        >事件地点：<i class="el-icon-map-location" style="font-size: 20px"></i>{{ postmessage.location }}</el-col
      >
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">上报人所属网格：{{ postmessage.grid }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">上报人电话：{{ postmessage.reportPhone | PhoneFormat }}</el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">问题类型：{{ postmessage.subTypeName }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">问题描述：{{ postmessage.mdescribe }}</el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">事项状态：{{ postmessage.statusName }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">
        <div>
          <span>派向部门：</span>
          <div v-if="depaShow" class="depaSty">
            <el-select v-model="depaId" placeholder="请选择" size="small" style="margin-left: 10px" @change="choose">
              <el-option v-for="item in optionchoose" :key="item.id" :label="item.roleName" :value="item.id">
              </el-option>
            </el-select>
            <i class="el-icon-close depaClose" @click="depaShow = false"></i>
          </div>
          <div v-else class="depaSty">
            {{ depaName }}
            <el-button style="margin-left: 10px" type="primary" size="mini" round @click="change">更改</el-button>
          </div>
        </div>
        <div>
          <span v-if="!depaShow">派向人员：</span>
          <span @click="idGetUser">
            <span v-show="!assignedUser">
              <a href="javascript:void(0);">查看人员</a>
              <i class="el-icon-caret-right"></i>
            </span>
          </span>
          <span v-show="assignedUser">{{ assignedUser }}</span>
        </div>
      </el-col>
    </el-row>
    <div v-if="depaId">
      <div v-if="depaUser.length">
        <div v-if="!seleUser.fullName" class="depaBoxTisp" @click="seleDialog = true">请选择指定人员</div>
      </div>
      <div v-else class="depaBoxTisp">此部门没有负责这个地点的人员</div>
    </div>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">事件来源：{{ postmessage.matterSourceName }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8" v-show="postmessage.returncause">退回原因：{{ postmessage.returncause }}</el-col>
      <el-col :span="8" v-show="!postmessage.returncause"></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center" v-show="postmessage.voice">
      <el-col :span="9"
        >音频文件：<audio
          ref="audio"
          :src="postmessage.voice"
          autoplay="autoplay"
          preload="auto"
          controls="controls"
        ></audio>
      </el-col>
      <el-col :span="1"></el-col>
      <el-col :span="8"> </el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center" v-show="this.postmessage != ''">
      <el-col :span="3"> 图片证明：</el-col>
      <el-col :span="5"
        ><el-image
          style="width: 120px; height: 120px"
          :src="postmessage.preImgList[0]"
          :preview-src-list="postmessage.preImgList"
        >
        </el-image
      ></el-col>
      <el-col :span="5">
        <el-image
          style="width: 120px; height: 120px"
          :src="postmessage.preImgList[1]"
          :preview-src-list="postmessage.preImgList"
          v-show="postmessage.preImgList[1]"
        >
        </el-image>
      </el-col>
      <el-col :span="5"
        ><el-image
          style="width: 120px; height: 120px"
          :src="postmessage.preImgList[2]"
          :preview-src-list="postmessage.preImgList"
          v-show="postmessage.preImgList[2]"
        >
        </el-image
      ></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8"
        >操作：
        <!-- <el-radio :disabled="bol" v-model="radios" label="7">派遣</el-radio> -->
        <!-- <el-radio v-model="radios" label="5">作废</el-radio> -->
        <el-select v-model="radios" placeholder="请选择" size="small">
          <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8"></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center" v-show="this.radios == 5 || this.radios == 9">
      <el-col :span="8" style="white-space: nowrap" v-show="this.radios == 5"
        >作废原因：<el-input
          type="textarea"
          :rows="3"
          placeholder="请限制字数在50个以内"
          maxlength="50"
          show-word-limit
          v-model="sentmessage.invalidResult"
          resize="none"
          style="width: 276px"
        >
        </el-input
      ></el-col>
      <el-col :span="8" style="white-space: nowrap" v-show="this.radios == 9"
        >退回原因：<el-input
          type="textarea"
          :rows="3"
          placeholder="请限制字数在50个以内"
          maxlength="50"
          show-word-limit
          v-model="sentmessage.returncause"
          resize="none"
          style="width: 276px"
        >
        </el-input
      ></el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8"></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="10">
        <div :class="{ timeBox: true, hideBox: timeHide }">
          <el-timeline :reverse="true">
            <el-timeline-item v-for="(activity, index) in process" :key="index" :timestamp="activity.time">
              {{ activity.clue }}
            </el-timeline-item>
          </el-timeline>
        </div>
        <div v-if="process.length > 2" class="more" @click="timeMore">
          <i :class="timeHide ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></i> 查看更多
        </div>
      </el-col>
      <el-col :span="10"></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"><el-button type="primary" class="check" @click="check">提交</el-button></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-dialog :append-to-body="true" top="30px" :visible.sync="centerDialogVisible" width="80%" center>
      <BDmap v-if="centerDialogVisible" :childmessage="message" :locations="location"></BDmap>
    </el-dialog>
    <el-dialog title="选择人员" :visible.sync="seleDialog" :modal="false">
      <div class="depaUserBox">
        <div v-if="depaUser.length">
          <div
            v-for="item in depaUser"
            :key="item.id"
            :class="{ useritem: true, active: item.active }"
            @click="depaUserClick(item.id)"
          >
            <img :src="item.avatar" alt="" class="userImg" />
            <div class="userName"><i v-if="item.active" class="el-icon-success"></i>{{ item.fullName }}</div>
          </div>
        </div>
        <div v-else class="depaTisp">此部门没有负责这个地点的人员</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Seats from '@/api/Seats'
import api from '@/api/api'
import * as admin from '@/api/admin'
import { PhoneFormat } from '@/utils/pipe'
export default {
  props: {
    postmessage: {
      type: Object,
      default() {
        return {}
      },
    },
    winState: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showf: false,
      centerDialogVisible: false,
      radios: '7',
      options: [],
      message: {},
      location: '',
      optionchoose: [],
      sentmessage: {
        invalidResult: '',
        matterId: '',
        responsibilityId: null,
        returncause: '',
        status: '',
      },
      process: [],
      timeHide: true,
      bol: false,
      option: [
        {
          value: '7',
          label: '派遣',
        },
        {
          value: '5',
          label: '作废',
        },
        {
          value: '9',
          label: '退回',
        },
      ],
      depaId: null,
      depaUser: [],
      seleUser: {},
      seleDialog: false,
      depaName: '',
      assignedUser: '',
      depaShow: false,
    }
  },
  watch: {
    radios(val) {
      if (val == 7) {
        this.sentmessage.invalidResult = ''
      }
    },
    winState: function (e) {
      if (e) {
        this.getclue()
        this.sentmessage.responsibilityId = this.postmessage.responsibilityId
        this.depaName = this.postmessage.responsibilityName
      } else {
        this.depaId = null
        this.sentmessage.returncause = ''
        this.sentmessage.responsibilityId = null
        this.seleUser = {}
        this.assignedUser = ''
      }
    },

    postmessage(newval, oldval) {
      if (oldval.returnNumber == 3) {
        this.bol = true
        this.radios = '5'
      }
    },
    immediate: true,
    deep: true,
  },
  methods: {
    async openClik() {
      this.location = this.postmessage.location
      await Seats.convert(this.postmessage.latitude, this.postmessage.longitude).then(e => {
        this.message.lat = e.lat
        this.message.lng = e.lng
        this.centerDialogVisible = true
      })
    },
    getclue() {
      api.getclue({ matterId: this.postmessage.matterId }).then(res => {
        if (res.code == 200) {
          this.process = res.data
        }
      })
    },
    timeMore() {
      this.timeHide = !this.timeHide
    },
    check() {
      switch (this.radios) {
        case '5':
          if (this.sentmessage.invalidResult == '') {
            this.$message({
              message: '请输入作废原因',
              type: 'error',
            })
          } else if (this.sentmessage.invalidResult != '') {
            this.Submit()
          }
          break
        case '7':
          if (!this.sentmessage.responsibilityId) {
            this.$message({
              message: '请选择派向部门人员',
              type: 'error',
            })
          } else {
            this.Submit()
          }
          break
        case '9':
          if (this.sentmessage.returncause == '') {
            this.$message({
              message: '请输入退回原因',
              type: 'error',
            })
          } else if (this.sentmessage.returncause != '') {
            this.Submit()
          }
          break
        default:
          break
      }
    },
    Submit() {
      this.sentmessage.matterId = this.postmessage.matterId
      this.sentmessage.status = this.radios
      Seats.submitmessage(this.sentmessage).then(res => {
        if (res.code == 200) {
          this.sentmessage = {
            invalidResult: '',
            matterId: '',
            responsibilityId: null,
            returncause: '',
            status: '',
          }
          this.$emit('Tips')
        }
      })
    },
    choose(val) {
      this.seleUser = {}
      this.sentmessage.responsibilityId = null
      let data = {
        lat: this.postmessage.latitude,
        lng: this.postmessage.longitude,
        roleId: val,
      }
      Seats.dutyGridAnalysis(data).then(res => {
        if (res.code == 200) {
          res.data.forEach(item => {
            item.active = false
          })
          this.depaUser = res.data
          if (res.data.length) {
            this.seleDialog = true
          }
        }
      })
    },
    change() {
      this.depaShow = true
    },
    getuser() {
      admin.RolePersonnel({}).then(res => {
        if (res.code == 200) {
          this.optionchoose = res.data
        }
      })
    },
    depaUserClick(id) {
      this.depaShow = false
      this.seleDialog = false
      this.sentmessage.responsibilityId = id
      this.depaUser.forEach(item => {
        if (item.id === id) {
          this.assignedUser = item.fullName
          this.seleUser = item
          item.active = true
        } else {
          item.active = false
        }
      })
    },
    idGetUser() {
      Seats.idGetUser({ id: this.sentmessage.responsibilityId }).then(res => {
        this.assignedUser = res.data.fullName
      })
    },
  },
  created() {
    this.getuser()
    this.getclue()
    this.sentmessage.responsibilityId = this.postmessage.responsibilityId
    this.depaName = this.postmessage.responsibilityName
    if (this.postmessage.returnNumber == 3) {
      this.bol = true
      this.radios = '5'
    }
  },
}
</script>

<style lang="scss" scoped>
.el-row {
  font-size: 14px;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
  div {
    box-sizing: border-box;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  .resizeNone {
    resize: none;
  }
}
.check {
  width: 88px;
  height: 37px;
  margin: 0 auto;
}
.timeBox {
  ::v-deep .el-timeline-item__content {
    line-height: 2;
  }
}
.hideBox {
  height: 120px;
  overflow: hidden;
}
.more {
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
}
.depaFlex {
  display: flex;
  justify-content: center;
}
.depaUserBox {
  border: solid 1px #e9e9e9;
  border-radius: 5px;
  padding: 18px 8px;
  margin: 0 auto;
  .useritem {
    display: inline-block;
    border: solid 1px #e9e9e9;
    border-radius: 5px;
    width: 100px;
    box-sizing: border-box;
    padding: 10px;
    margin: 0 10px 10px;
    box-shadow: 0px 5px 5px #e5e5e5;
    cursor: pointer;
    &:hover {
      background-color: rgb(245, 245, 245);
    }
    &.active {
      i {
        font-size: 12px;
        color: rgb(0 195 130);
      }
    }
    .userImg {
      display: inline-block;
      width: 80px;
      height: 80px;
    }
    .userName {
      text-align: center;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .depaTisp {
    font-size: 14px;
    color: #8d8d8d;
  }
}
.depaBoxTisp {
  width: 400px;
  border: solid 1px #e9e9e9;
  text-align: center;
  border-radius: 5px;
  padding: 18px 8px;
  margin: 0 auto;
  font-size: 14px;
  color: #8d8d8d;
  cursor: pointer;
}
.depaSty {
  display: inline-block;
}
.depaClose {
  margin-left: 10px;
  cursor: pointer;
}
</style>
